<div class="error_message"></div>

<form 
    class  = "form_input"
    action = "<?=Yii::app()->createUrl("category/save")?>"
    method = "post"
    id     = "form_item"
    name   = "form_item"
>
    <fieldset class="border_radius_all">
        <legend></legend>

        <div class="form_input_row">
            <label class="label_title">Danh Mục:*</label>

            <div class="input_item">
                <input
                    id       = "txt_name"
                    name     = "txt_name"
                    title    = "Tên Danh Mục"
                    type     = "text"
                    value    = "<?php if(isset($o_model)) { echo $o_model->name;}?>"
                    class    = "form_textbox textbox_css3"
                    tabindex = "1"
                    onblur   = "validation_empty(this,'lbl_name_validation')"
                />

                <label
                    id    = "lbl_name_validation" 
                    class = "lable_validation"
                >Bạn chưa nhập tên danh mục.</label>
            </div>
        </div><!--End form_input_row Name-->

        <div class="form_input_row">
            <label class="label_title">URL Ảo:*</label>

            <div class="input_item">
                <input
                    id       = "txt_url"
                    name     = "txt_url"
                    title    = "URL Ảo"
                    type     = "text"
                    value    = "<?php if(isset($o_model)) { echo $o_model->url_mapping;}?>"
                    class    = "form_textbox textbox_css3"
                    tabindex = "2"
                    onblur   = "validation_empty(this,'lbl_url_validation')"
                />

                <label
                    id    = "lbl_url_validation"
                    class = "lable_validation"
                >Bạn chưa nhập url ảo.</label>
            </div>
        </div><!--End form_input_row Name-->

        <div class="form_input_row">
            <label class="label_title">Hình Ảnh:</label>

            <div class="input_item">
                <input
                    id       = "txt_image"
                    name     = "txt_image"
                    title    = "Hình ảnh đại diện danh mục"
                    type     = "text"
                    value    = "<?php if(isset($o_model)) { echo $o_model->image;}?>"
                    class    = "form_textbox textbox_css3"
                    tabindex = "3"
                />
            </div>
        </div><!--End form_input_row Account-->

        <div class="form_input_row">
            <label class="label_title">Danh Mục Cha:*</label>

            <div class="input_item">
                <select 
                    id       = "sl_parent"
                    name     = "sl_parent"
                    tabindex = "4"
                >
                    <option value="">----Xin hãy chọn danh mục----</option>
                    <?php
                    foreach ( $arr_category as $i_index => $o_category ) {
                        if ( !($o_category instanceof Category) ) {
                            continue;
                        }

                        if( isset($o_model) && $o_model->parent == $o_category->key ) {
                            echo '<option value="'.$o_category->key.'" selected="selected">'.$o_category->name.'</option>';
                        } else {
                            echo '<option value="'.$o_category->key.'">'.$o_category->name.'</option>';
                        }
                    }
                    ?>
                </select>
            </div>
        </div><!--End form_input_row Password-->

        <div class="form_input_row border_bottom_none">
            <div class="title_full"> <strong>Mô Tả:</strong></div>

            <textarea
                id       = "ta_description"
                name     = "ta_description"
                rows     = "10"
                cols     = "40"
                tabindex = "5"
            ><?php if(isset($o_model)) { echo CHtml::decode($o_model->description);}?></textarea>
        </div>

        <div class="row_bottom">
                <input
                    title    = "gửi yêu cầu"
                    name     = "btn_save"
                    id       = "btn_save"
                    type     = "submit"
                    value    = "Lưu"
                    class    = "width_50"
                    tabindex = "6"
                />

                <input
                    title    = "gửi yêu cầu"
                    name     = "btn_cancel"
                    id       = "btn_cancel"
                    type     = "button"
                    value    = "Hủy Bỏ"
                    class    = "width_50"
                    tabindex = "7"
                />
        </div><!--End row_bottom-->
    </fieldset>
</form>

<script type="text/javascript">
var ta_description, html = '';

$(document).ready(function ()
{
    ta_description = CKEDITOR.replace(
        'ta_description',
        {
            toolbar: [
                ['Source'],
                [ 'Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink' ],
                [ 'FontSize', 'TextColor', 'BGColor' ],
                [ 'UIColor' ]
            ]
        },
        html
    );//End CKEDITOR

    $('#txt_name').focus();
});//End $(document).ready


$('#btn_cancel').click(function()
{
    $("#dialog_notice").dialog("close");
    var i_key = <?=$i_key?>;

    if(i_key != 0) {
        $("#tr_"+i_key).css("background-color","#FFFFFF");
    }
});//End $('#btn_cancel').click


$('#txt_name').blur(function()
{
    var str               = remove_utf8(this.value.toLowerCase());
    var special_character = " ,@!/-#%&";//unavailable:$^*()

    for( var i = 0; i < special_character.length; i++ ) {
        str = str.replace(new RegExp(special_character.charAt(i), 'g'),"-");
    }//End for

    $('#txt_url').val(str);
});//End $('#txt_name').blur

function form_onsubmit(param)
{
    if ( $("#txt_name").val() == "" || $("#txt_name").val().length < 4 )
    {
        $("#lbl_name_validation").fadeIn("slow", "linear");
        $("#txt_name").focus();
        return false;
    }//End if

    if ( $("#txt_url").val() == "" || $("#txt_url").val().length < 4)
    {
        $("#lbl_url_validation").fadeIn("slow", "linear");
        $("#txt_url").focus();
        return false;
    }//End if

    return true;
}//End form_onsubmit

//attach a submit handler to the form
$("#form_item").submit(function(event)
{
    //stop form from submitting normally
    event.preventDefault();

    var bool_submit = form_onsubmit("form_item");

    if (bool_submit == true) {
        //open loading image
        $( "#dialog_excute" ).dialog( "open" );

        //Set item key
        var i_key = <?=$i_key?>;

        //Call process by Ajax
        $.ajax({
            url         : "<?=Yii::app()->createUrl("category/save");?>",
            type        : "POST",
            contentType : "application/x-www-form-urlencoded; charset=UTF-8",
            cache       : false,
            data        : {
                item_key       : i_key,
                txt_name       : $("#txt_name").val(),
                txt_urlMapping : $("#txt_url").val(),
                txt_image      : $("#txt_image").val(),
                sl_parent      : $("#sl_parent").val(),
                ta_description : ta_description.getData()
            },
            success : function(string) {
                /**
                 * Kiểu mặc định trả về là dạng String, bạn dùng hàm parseJSON để phân tích dữ liệu trả về
                 * có 2 cách parse JSON là : JSON.parse() và $.parseJSON();
                 * 1. var getData = JSON.parse(string);
                 * 2. var getData = $.parseJSON(string);
                **/
                var arr_result = $.parseJSON(string);

                //Check if error exist
                if(arr_result.error != null)
                {
                    alert(arr_result.error);
                    $("#dialog_excute").dialog( "close" );
                    return;
                }

                var ct_row = "";

                if(i_key != 0)
                {
                    ct_row += "<td>";
                    ct_row += "    <input";
                    ct_row += "        id        = 'chk_delete'";
                    ct_row += "        name    = 'chk_delete'";
                    ct_row += "        type    = 'checkbox'";
                    ct_row += "        class    = 'check_box'";
                    ct_row += "        value    = '"+ arr_result.key +"'";
                    ct_row += "        onclick='display_button(this);'";
                    ct_row += "    />";
                    ct_row += "</td>";

                    ct_row += "<td>" + arr_result.key            + "</td>";
                    ct_row += "<td><a href='javaScript:void(0);' onclick='call_edit_page("+arr_result.key+")'><i class='fa fa-edit fa-2x'></i>" + arr_result.name            + "</a></td>";
                    ct_row += "<td>" + arr_result.image            + "</td>";
                    ct_row += "<td>" + arr_result.parent_name    + "</td>";
                    ct_row += "<td>" + arr_result.insert        + "</td>";

                    $("#tr_"+i_key).html(ct_row);

                    $("#tr_"+i_key).css("background-color","#FFFFFF");

                    $("#dialog_excute").dialog( "close" );
                    $("#dialog_notice").dialog("close");

                }//End if
                else if (i_key == 0)
                {
                    alert("Thêm thành công.");
                    $("#dialog_excute").dialog( "close" );
                    $('#txt_name').focus();
                }//End else if
            },//End success
            error: function ()
            {
                alert('Trang hiện hành không tồn tại.');
                $("#dialog_excute").dialog( "close" );
                $("#dialog_notice").dialog("close");
            }//End error
        });//End Ajax
    }//End if (bool_submit == true)

    return false;
});//End form submit
</script>